<template>
  <div>
    <!-- 待领取任务 -->
    <div v-if="worklist.length > 0">

      <div class="gotowork_content" v-for="(item, index) in worklist"
        :key="index" >

        <div class="gotowork_content2">
          <div class="content2_title">
            <span>{{ item.title }}</span>
            <span>{{item.area}} | {{ item.cate_name }}</span>
            <span @click="Todeterminedes(item.id,item.status)">详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: {{ item.price }}</span>
              <span>时间: {{ item.add_time }}</span>
            </div>
            <div @tap="onCreateWater(item.id)" class="content2_content_but">抢单</div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
          </div>
          <span>{{item.address}}</span>
          <span>{{item.timeTran}}</span>
        </div>

        <!-- <div class="gotowork_content2">
          <div class="content2_title">
            <span>上水管维修</span>
            <span>房县|上水维修</span>
            <span @click="Todeterminedes">详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: 888</span>
              <span>时间: 2020.12.12</span>
            </div>
            <div
              class="content2_content_but"
              @click="content2_content_but"
            >
              抢单
            </div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img
              src="/"
              alt=""
            >
            <span>马先生</span>
          </div>
          <span>房县诗经广场...</span>
          <span>1分钟以前</span>
        </div> -->
      </div>

      <!-- <div class="gotowork_content">
        <div class="gotowork_content2">
          <div class="content2_title">
            <span>上水管维修</span>
            <span>房县|上水维修</span>
            <span>详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: 888</span>
              <span>时间: 2020.12.12</span>
            </div>
            <div class="content2_content_but">
              抢单
            </div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img
              src="/"
              alt=""
            >
            <span>马先生</span>
          </div>
          <span>房县诗经广场...</span>
          <span>1分钟以前</span>
        </div>

      </div>

      <div class="gotowork_content">
        <div class="gotowork_content2">
          <div class="content2_title">
            <span>上水管维修</span>
            <span>房县|上水维修</span>
            <span>详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: 888</span>
              <span>时间: 2020.12.12</span>
            </div>
            <div class="content2_content_but">
              抢单
            </div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img
              src="/"
              alt=""
            >
            <span>马先生</span>
          </div>
          <span>房县诗经广场...</span>
          <span>1分钟以前</span>
        </div>

      </div> -->
    </div>

    <div v-else class="tishi">暂无更多任务</div>
  </div>
</template>

<script>
export default {
  props: {

  },
  data() {
    return {
      worklist: [],
      user: ''
    };
  },
  onShow() {

    let mobile =  wx.getStorageSync("mobile")
    this.request({
      url: this.baseUrl + '/api/edit/waterUser',
      data:{
        type: 1,
        mobile: mobile
      },
      method: 'POST',
    })
    .then(result=>{
			// console.log(result)
			if(result.status == 200){
        this.user = result.data.user_login
        // console.log(this.user.id)
        if(this.user.work_status == 0){
          this.tabsflg = false
        } else {
          this.tabsflg = true    
        }

        this.request({
          url: this.baseUrl + '/api/wechatapp/worklist',
          data:{
          },
          method: 'GET',
        })
        .then(result=>{
          // console.log(result.data)
          if(result.status == 200){
            this.worklist = result.data
            // console.log(this.worklist)
          } else {
            return false
          }
        })

			} else {
        wx.reLaunch({
          url: '../login/main'
        })
        return false
			}
    })
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    // 抢单成功跳转提示页面
    content2_content_but() {
      wx.navigateTo({
        url: '../success/main'
      })

    },
    // 跳转工单详情页面
    Todeterminedes(id,status) {
      wx.navigateTo({
        url: '../determinedes/main?id=' + id + '&status=' + status
      })
    },
    onCreateWater(id) {
      // console.log(id)
      let mobile =  wx.getStorageSync("mobile")
      this.request({
        url: this.baseUrl + '/api/edit/waterUser',
        data:{
          type: 1,
          mobile: mobile
        },
        method: 'POST',
      })
      .then(result=>{
        if(result.status == 200){
          this.user = result.data.user_login
          this.request({
            url: this.baseUrl + '/api/wechatapp/createWater',
            data:{
              water_id: id,
              water_user_id: this.user.id,
            },
            method: 'POST',
          })
          .then(result=>{
            if(result.status == 200){
              // console.log(result)
              wx.navigateTo({
                url: "/pages/success/main",
              })
              return true
            } else {
              wx.showModal({
                title: '抢单人账号正在审核中',
                content: '',
                success: function (res) {
                  if (res.confirm) {
                    // console.log('用户点击确定');
                  } else if (res.cancel) {
                    // console.log('用户点击取消');
                  }
                }
              })
              return false
            }
          })
        } else {
          return false
        }
      })
      
    }

  },
  components: {

  },
};
</script>

<style scoped >
.gotowork_content {
  padding: 0 20rpx 20rpx 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 20rpx;
  background-color: white;
}
/* .gotowork_content1 {
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}
.gotowork_content1 > span:nth-child(1) {
  font-size: 35rpx;
}
.gotowork_content1 > span:nth-child(2) {
  color: #999999;
} */
.gotowork_content2 {
  padding: 15rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.content2_title {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}
.content2_title > span:nth-child(1) {
  font-size: 35rpx;
  width: 220rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content2_title > span:nth-child(2) {
  /* flex: 2; */
  font-size: 35rpx;
  margin-right: 100rpx;
}
.content2_title > span:nth-child(3) {
  /* flex: 1; */
  color: #999999;
}
.content2_content {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
}
.content2_details {
  display: flex;
  flex-direction: column;
}
.content2_details span {
  margin: 10rpx 0;
}
.content2_content_but {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #1677ff;
  border-radius: 40rpx;
  text-align: center;
  color: white;
  margin-top: 35rpx;
}
.gotowork_content3 {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #999999;
}
.gotowork_content3 img {
  height: 48rpx;
  width: 48rpx;
  border-radius: 50%;
  margin: 0 20rpx 20rpx 0;
  background-color: #eee;
}
.gotowork_content3 > div:nth-child(1) {
  display: flex;
}
</style>
